<template>
	<view>
		<u-navbar :is-back="true" title="投诉理由"></u-navbar>
		<view class="tousuliyou-box">
			<view class="tousuliyou-cell u-flex">
				<text class="xuanze-btn xuanze-active"></text>
				<text class="liyou-text u-font-30">发布违法信息</text>
			</view>
			<view class="tousuliyou-cell u-flex">
				<text class="xuanze-btn"></text>
				<text class="liyou-text u-font-30">存在诈骗行为</text>
			</view>
			<view class="tousuliyou-cell u-flex">
				<text class="xuanze-btn"></text>
				<text class="liyou-text u-font-30">发布骚扰信息</text>
			</view>
			<view class="tousuliyou-cell u-flex">
				<text class="xuanze-btn"></text>
				<text class="liyou-text u-font-30">其他</text>
			    <view class="wenti-input">
					 <u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" placeholder="请输入问题" />
				</view>
			</view>
		</view>
		<view class="tousu-btn">
			<u-button class="customstyle" hover-class="none" :hair-line="false">提交投诉</u-button>
		</view>
		<tarBer :totarBer='tar'></tarBer>
	</view>
</template>

<script>
	import tarBer from '../../../components/tabBarFoot/tabBarFoot.vue'
	export default {
		components:{
				 tarBer
			 },
		data() {
			return {
				value: '',
				type: 'textarea',
				border: false,
				height: 40,
				autoHeight: true,
				tar:{
						color:'#fff',
						id:1		 
				}
			};
		}
	}
</script>

<style lang="scss">
.tousuliyou-cell{
	padding: 40rpx 45rpx 20rpx;
	border-bottom: 1px solid #eeeeee;
	.xuanze-btn{
		width: 30rpx;
		height: 30rpx;
		background-color: #b5b5b5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}
	.xuanze-active{
		background:#b5b5b5 url(../../../static/img/xuanze.png) no-repeat 2px 2px;
		width: 30rpx;
		height: 30rpx;
		background-size: 80% 80%;
	}
	.liyou-text{
		width: 180rpx;
	}
	.wenti-input{
		font-size: 28rpx;
		padding-left: 20rpx;
		flex: 1;
	}
}
.tousu-btn{
	margin: 140rpx 70rpx 0;
	.customstyle{
		background-color: #2ea34a;
		color: #FFFFFF;
		font-size: 30rpx;
		
	}
}
</style>
